<template lang="pug">
  .bill-table.time-search
    Modal.lzw-modal-style-3(
      width="1200"
      v-model="isShowTableShangbaomingxiModal"
      title="商保明细"
      class-name="vertical-center-modal"
      footer-hide
      fullscreen
    )
      Table.beautiful-table.time-search(:columns="thead" :data="tableData" ref="table" :height="600")
        .clearfix.font-14(slot="header")
          Row
            Col(span="4") 账单月份：{{year}}年{{month}}月
            Col.ellipsis(span="4") 单位名称：{{companyName}}
            Col(span="12") 
              span 参保月份：
              DatePicker.interval-date-140(:value="startDate" placeholder="开始日期" type="month" @on-change="handleChangeDatePicker('startDate', $event)")
              span.pl-10.pr-10.line-h-32 --
              DatePicker.interval-date-140.mr-20(:value="endDate" placeholder="结束日期" type="month" @on-change="handleChangeDatePicker('endDate', $event)")
            Col(span="4")
              Button.pull-right.mt-8(type="info" @click="exportCIDetails") 导出
        .clearfix.pl-20.pr-20(slot="footer")
          Page(
            :current="tableComone.pageIndex"
            :total="tableComone.totalRows"
            @on-change="onChangePage"
            @on-page-size-change="onpageSizeChange"
            show-sizer
            show-total
            placement="top"
            prev-text="上一页"
            next-text="下一页"
            :page-size-opts="[10, 20, 30, 50, 100]"
          )

      Row.mt-20.line-h-34.font-14
        Col(span="8" v-for="item in formItem")
          span {{item.text}}：
          span.text-error.font-weight {{item.value}}

</template>

<script>
import { tableShangbaomingxiThead } from './modalTableHead.js'
import _cloneDeep from 'clone-deep'
import Mixin from '../modalMixin/tableShangbaomingxiModalMixin.js'

export default {
  name: '',

  mixins: [Mixin],

  data () {
    return {
      thead: _cloneDeep(tableShangbaomingxiThead)
    }
  },

  watch: {
  },

  mounted () {
    this.companyId = this.$route.query.companyId
  },

  methods: {
  }
}
</script>

<style lang="less" scope>
  .time-search{
    .ivu-table .ivu-table-title{
      height: 100px;
    }
  }
</style>
